<template>
	<view class="message-detail">
		<u-navbar title="消息详情" :border-bottom="false" @click-left="goBack" :title-size="38" :height="30"></u-navbar>

		<view class="detail-card">
			<view class="detail-title">{{ message.title }}</view>
			<view class="detail-time">{{ message.sendTime }}</view>
			<view class="detail-content">{{ message.content }}</view>
		</view>
	</view>
</template>

<script>
	import {
		getMessageDetails
	} from '@/api/api'
	import WebSocketService from '@/utils/websocket.js'
	export default {
		data() {
			return {
				info: '',
				message: {
					id: null,
					title: '',
					content: '',
					sendTime: '',
					info: ''
				}
			}
		},
		onLoad(options) {
			//存储路由跳转参数
			this.info = options
			//初始化webSocket服务
			this.initWebSocketListener()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 页面初始化处理 webSocket 服务
			initWebSocketListener() {
				WebSocketService.onMessage((msg) => {
					console.log("指令码为：【"+msg.cmd+"】")
					if (msg.cmd === 11005) {
						console.log("处理指令：【11005】")
						this.getMessageDetail(msg)
					}
				})
				// 查询一次消息数据
				WebSocketService.send({
					"cmd": "1005",
					"ext": {
						"userId": this.info.userId,
						"messageId": this.info.id
					}
				})
			},
			getMessageDetail(data) {

				if (data && data.code === 200 && data.data) {

					const messages = data.data

					const oldList = this.message

					if (JSON.stringify(messages) !== JSON.stringify(oldList)) {
						this.message = messages
					}
				}
				// const param = {
				// 	id: id
				// }
				// getMessageDetails(param).then(res => {
				// 	if(res.code === 200 && res.data){
				// 		this.message = res.data
				// 	}
				// })
			}
		}
	}
</script>

<style scoped>
	.message-detail {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 30rpx;
	}

	.detail-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.detail-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #111;
		margin-bottom: 20rpx;
	}

	.detail-time {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.detail-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
</style>